<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<!-- include meta, stylesheets, jquery and title -->
	<ui:include src="/WEB-INF/master/implement.xhtml" />
</h:head>

<h:body>

	<!-- display and change profil settings -->

	<ui:include src="/WEB-INF/master/header.xhtml" />
	<div class="container navigation">

		<f:event listener="#{customerController.getAllCustomerData}" type="preRenderView" />
		
		<!-- visible part for users -->
		<h:panelGroup rendered="#{customerSession.loggedIn == 1}" id="bodyUser">

		<h2>Mein Profil - #{customer.email}</h2>
		<hr />


			<h:form id="editCustomer">
				<h:panelGrid columns="3" cellpadding="5">
				
					<h:outputLabel for="friendcode" value="Freundecode:" styleClass="registerField" />
					<p:inputMask id="friendcode" value="#{customer.friendcode}" required="true" mask="9999-9999-9999" requiredMessage="Bitte Freundecode eingeben!" />
					<p:message for="friendcode" />
	
					<h:outputLabel for="oldPassword" value="Aktuelles Passwort:" styleClass="registerField"/>
					<p:password id="oldPassword" value="#{customer.oldPassword}" size="15" style="width: 180px" />
					<p:message for="oldPassword" showDetail="true" autoUpdate="true" />
	
					<h:outputLabel for="password" value="Neues Passwort:" styleClass="registerField" />
					<p:password id="password" value="#{customer.password}" size="15" match="password2" feedback="true" validatorMessage="Passw&ouml;rter stimmen nicht überein!" style="width: 180px" />
					<p:message for="password" showDetail="true" autoUpdate="true" />
	
					<h:outputLabel for="password2" value="Passwort wiederholen:" styleClass="registerField" />
					<p:password id="password2" value="#{customer.passwordRepetition}" size="15" feedback="true" style="width: 180px" />
					<p:message for="password2" />
	
				</h:panelGrid>
				<hr />
				<h:panelGrid columns="6" cellpadding="5">
	
					<h:outputLabel for="name" value="Vor- und Nachname:" styleClass="registerField" />
					<p:inputText id="name" value="#{customer.name}" required="true" requiredMessage="Bitte Namen eingeben!">
						<f:validateLength minimum="3" maximum="40" />
					</p:inputText>
					<p:message for="name" />
	
					<h:outputLabel for="street" value="Strasse und Hausnummer:" styleClass="registerField" />
					<p:inputText id="street" value="#{customer.street}" required="true" requiredMessage="Bitte Strasse und Hausnummer eingeben!">
						<f:validateLength minimum="3" maximum="40" />
					</p:inputText>
					<p:message for="street" />
	
					<h:outputLabel for="city" value="Stadt:" styleClass="registerField" />
					<p:inputText id="city" value="#{customer.city}" required="true" requiredMessage="Bitte Stadt eingeben!">
						<f:validateLength minimum="3" maximum="40" />
					</p:inputText>
					<p:message for="city" />
	
					<h:outputLabel for="postcode" value="Postleitzahl:" styleClass="registerField" />
					<p:inputText id="postcode" value="#{customer.postcode}" required="true" validatorMessage="Bitte gültige Postleitzahl eingeben!" requiredMessage="Bitte Postleitzahl eingeben!" >
						<f:validateRegex pattern="^[0-9]{5}$"/>
					</p:inputText>
					<p:message for="postcode" />
	
					<h:outputLabel for="telephone" value="Telefon (optional):" styleClass="registerField" />
					<p:inputText id="telephone" value="#{customer.telephone}" validatorMessage="Bitte gültige Telefonnummer eingeben!">
						<f:validateRegex pattern="[0-9]*"/>
					</p:inputText>
					<p:message for="telephone" />
	
					<h:outputLabel for="company" value="Firmenname (optional):" styleClass="registerField" />
					<p:inputText id="company" value="#{customer.company}">
						<f:validateLength minimum="3" maximum="40" />
					</p:inputText>
					<p:message for="company" />
	
				</h:panelGrid>
				<hr />
				<h:panelGrid columns="6" cellpadding="5">
	
					<h:outputLabel for="bankDepositor" value="Kontoinhaber:" styleClass="registerField" />
					<p:inputText id="bankDepositor" value="#{customer.bankDepositor}" required="true" requiredMessage="Bitte Kontoinhaber eingeben!">
						<f:validateLength minimum="3" maximum="40" />
					</p:inputText>
					<p:message for="bankDepositor" />
	
					<h:outputLabel for="bankAccountNo" value="Kontonummer:" styleClass="registerField" />
					<p:inputMask id="bankAccountNo" value="#{customer.bankAccountNo}" required="true" mask="9999 999 999" requiredMessage="Bitte Kontonummer eingeben!" />
					<p:message for="bankAccountNo" />
	
					<h:outputLabel for="bankCode" value="Bankleitzahl:" styleClass="registerField" />
					<p:inputMask id="bankCode" value="#{customer.bankCode}" required="true" mask="999 999 99" requiredMessage="Bitte Bankleitzahl eingeben!" />
					<p:message for="bankCode" />
	
				</h:panelGrid>
				<hr />
				
				<h:panelGrid columns="6" cellpadding="5">
					<p:commandButton action="#{customerController.updateCustomer()}" oncomplete="$('#changeProfil').modal('show'); return false;" value="Speichern" update=":headerUser" validateClient="true" style="margin-right:10px" />
				</h:panelGrid>
	
			</h:form>
		
		</h:panelGroup>
		
		<!-- visible part for guests -->
		<h:panelGroup rendered="#{customerSession.loggedIn == 0}" id="bodyGuest">
			<h1>Bitte loggen Sie sich ein, wenn Sie ihr Profil bearbeiten möchten.</h1>
		</h:panelGroup>

	</div>
	
	<!-- modal message after submitting changes -->
	<div class="modal fade" id="changeProfil" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<form class="form-horizontal">
					<div class="modal-body">
						<h4>Profil erfolgreich verändert.</h4>
					</div>
				</form>
			</div>
		</div>
	</div>

</h:body>
</html>
